<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const visible = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">全屏</div>
    <div class="demo-content">
      <Button type="primary" @click="showModal">Open Modal</Button>
      <Modal
        v-model:visible="visible"
        title="Basic Modal"
        width="100%"
        wrap-class-name="full-modal"
        @ok="handleOk"
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  </div>
</template>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
